<!--房间排班页-->
<template>
  <el-container>
    <el-header height="8vh"
               style="padding: 10px 20px;background-color: #fff;overflow:hidden;">
      <span style="float: left;line-height: 60px;font-size: 20px;">
        房间排班
      </span>
      <el-button :disabled="!roomQuery.shopId"
                 style="float: left;margin:15px 0 0 40px;"
                 type="primary" @click="showAddSchedule">
        修改排班
      </el-button>
      <el-form :inline="true" style="float: right;margin-top: 20px;">
        <el-form-item label="房间" style="width: 170px;">
          <el-select v-model="roomSelect"
                     placeholder="请选择房间">
            <el-option v-for="room in roomList"
                       :label="room.name" :value="room.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" style="width: 170px;">
          <el-date-picker v-model="date"
                          value-format="YYYY-MM-DD" @change="loadSchedule"/>
        </el-form-item>
        <el-form-item label="店家选择" style="width: 220px;">
          <el-select v-model="roomQuery.shopId"
                     placeholder="请选择店家" @change="loadRoom">
            <el-option v-for="shop in merchant.shopList"
                       :label="shop.shopName" :value="shop.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-header>

    <el-main>
      <el-scrollbar style="width: 100%"
                    view-style="min-width:0; display: inline-flex;"
                    wrap-style="display:flex; white-space:nowrap">
        <el-card v-for="room in roomList"
                 v-show="!roomSelect || roomSelect === room.id"
                 style="width: 350px; flex-shrink: 0; margin-right: 10px;">
          <div style="text-align: center">
            <span>{{ room.name }}</span>
          </div>
          <el-timeline style="max-width: 350px;margin-top: 20px">
            <el-timeline-item placement="top" timestamp="00:00"/>
            <el-timeline-item v-for="(schedule, index) in room.scheduleList"
                              v-if="room.scheduleList?.length > 0"
                              :timestamp="schedule.startTime"
                              :type="getTimeLineType(schedule.status)"
                              placement="top">
              <el-collapse>
                <el-collapse-item :title="getTitle(schedule)">
                  {{ getStatusDesc(schedule.status) }}
                  <span v-if="schedule.orderId">
                    <hr>
                    订单号：{{ schedule.orderId }}
                  </span>
                </el-collapse-item>
              </el-collapse>
            </el-timeline-item>
            <el-timeline-item placement="top" timestamp="23:59"/>
          </el-timeline>
        </el-card>
      </el-scrollbar>
    </el-main>
  </el-container>

  <el-dialog
      v-model="addDialogVisible"
      :before-close="handleCloseAdd"
      style="padding: 40px;"
      title="新增排班"
      width="1000px">
    <span>新排班会覆盖旧排班</span>
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="房间id">
            <el-select v-model="newSchedule.roomId"
                       placeholder="请选择房间">
              <el-option v-for="room in roomList"
                         :label="room.name" :value="room.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排班日期">
            <el-date-picker v-model="newSchedule.scheduleDate"
                            value-format="YYYY-MM-DD"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="排班时间">
            <el-time-picker v-model="newSchedule.timeRange"
                            end-placeholder="结束" is-range
                            start-placeholder="开始"
                            value-format="HH:mm"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房间状态">
            <el-select v-model="newSchedule.status">
              <el-option v-for="item in roomStatusEnum"
                         :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="订单id">
            <el-input v-model="newSchedule.orderId"
                      placeholder="请输入订单id"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleCloseAdd">取消</el-button>
      <el-button type="primary"
                 @click="saveSchedule">保存排班
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
import axios from "axios";

const merchant = ref({
  shopList: [],
});
const roomQuery = ref({
  shopId: null,
  visible: '1',
})
const roomSelect = ref(null);
const roomStatusEnum = ref([]);
const roomList = ref([]);
const date = ref(new Date().toISOString().split("T")[0]);
const timeLineTypeEnum = ref([
  {value: '0', label: 'info'},
  {value: '1', label: 'success'},
  {value: '2', label: 'primary'},
  {value: '3', label: 'warning'},
]);
const addDialogVisible = ref(false);
const newSchedule = ref({});

onMounted(() => {
  getMerchant(merchant);
  loadEnum(roomStatusEnum, 'RoomStatus');
});
const loadRoom = () => {
  if (roomQuery.value.shopId == null) {
    ElMessage.info("请选择店家");
    return;
  }
  let data = qs.stringify(roomQuery.value);
  axios.get(BASE_URL + 'v1/show/room/select?' + data)
      .then(res => {
        if (res.data.code === 2000) {
          roomList.value = res.data.data;
          // console.log(roomList.value);
          loadSchedule();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
}
const loadSchedule = () => {
  roomSelect.value = null;
  if (roomQuery.value.shopId == null) {
    ElMessage.info("请选择店家");
    return;
  }
  if (date.value == null) {
    ElMessage.info("请选择日期");
    return;
  }
  if (roomList?.value.length > 0) {
    let scheduleQuery = {
      startDate: date.value,
      endDate: date.value,
    }
    for (let room of roomList.value) {
      scheduleQuery.roomId = room.id;
      axios.get(BASE_URL + 'v1/schedule/room/select',
          {params: scheduleQuery})
          .then(res => {
            if (res.data.code === 2000) {
              room.scheduleList = res.data.data;
              // console.log(roomList.value);
            } else {
              ElMessage.error(res.data.msg);
            }
          })
    }
  }
}
const getTimeLineType = (status) => {
  return cellValueFormatter(status, timeLineTypeEnum);
}
const getTitle = (schedule) => {
  return schedule.startTime + '-' + schedule.endTime;
}
const getStatusDesc = (status) => {
  return cellValueFormatter(status, roomStatusEnum);
}
const showAddSchedule = () => {
  newSchedule.value = {
    roomId: roomSelect.value,
    scheduleDate: date.value,
    timeRange: [],
    status: '0',
    orderId: null,
  }
  addDialogVisible.value = true;
}
const handleCloseAdd = () => {
  if (confirm('是否放弃编辑？')) {
    closeAddDialog();
  }
}
const closeAddDialog = () => {
  newSchedule.value = {}
  addDialogVisible.value = false;
}
const saveSchedule = () => {
  if (newSchedule.value.roomId == null) {
    ElMessage.error('请选择房间');
    return;
  }
  let timeRange = newSchedule.value.timeRange;
  if (timeRange.length === 0
      || newSchedule.value.scheduleDate == null) {
    ElMessage.error('请选择时间');
    return;
  }
  newSchedule.value.startTime = timeRange[0];
  newSchedule.value.endTime = timeRange[1];
  axios.post(BASE_URL + 'v1/schedule/room/save',
      newSchedule.value)
      .then(res => {
        if (res.data.code === 2000) {
          ElMessage.success('保存成功！');
          closeAddDialog();
          loadSchedule();
        } else {
          ElMessage.error(res.data.msg);
        }
      })
}
</script>

<style scoped>

</style>